<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>灌溉施肥 - 智慧农业管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            background-color: #f8faf6;
            color: #334155;
        }

        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
            color: white;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo h1 {
            font-size: 24px;
            font-weight: 700;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-info span {
            margin-right: 15px;
            font-weight: 500;
        }

        .user-info .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f1f8e9;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4caf50;
            font-weight: 600;
            cursor: pointer;
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            padding: 8px 0;
            min-width: 160px;
            z-index: 100;
            display: none;
            margin-top: 10px;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        .dropdown-item {
            display: block;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        
        .dropdown-item:hover {
            background-color: #f1f8e9;
            color: #2e7d32;
        }
        
        .dropdown-divider {
            height: 1px;
            background-color: #e0e0e0;
            margin: 8px 0;
        }

        /* 主内容区域 */
        .main-content {
            display: flex;
            min-height: calc(100vh - 80px);
        }

        /* 左侧导航 */
        .sidebar {
            width: 220px;
            background: #e8f5e9;
            padding: 20px 0;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 5;
        }

        .nav-group {
            margin-bottom: 30px;
        }

        .nav-title {
            color: #2e7d32;
            font-size: 16px;
            font-weight: 600;
            padding: 10px 25px;
            margin-bottom: 10px;
        }

        .nav-item {
            display: block;
            padding: 12px 25px;
            color: #334155;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .nav-item:hover {
            background-color: #c8e6c9;
            color: #2e7d32;
        }

        .nav-item.active {
            background-color: #a5d6a7;
            color: #2e7d32;
            font-weight: 500;
            border-left: 4px solid #4caf50;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            padding: 30px;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #2e7d32;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #334155;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background-color: #4caf50;
            color: white;
        }

        .btn-primary:hover {
            background-color: #388e3c;
        }

        .btn-success {
            background-color: #4caf50;
            color: white;
        }

        .btn-success:hover {
            background-color: #388e3c;
        }

        .btn-danger {
            background-color: #f44336;
            color: white;
        }

        .btn-danger:hover {
            background-color: #d32f2f;
        }

        /* 控制面板样式 */
        .control-mode {
            margin-bottom: 25px;
        }

        .control-mode h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #334155;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .radio-option {
            display: flex;
            align-items: center;
        }

        .radio-option input {
            margin-right: 8px;
        }

        .schedule-list {
            margin-top: 20px;
        }

        .schedule-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.2s;
        }

        .schedule-item:hover {
            background-color: #f9f9f9;
        }

        .schedule-item:last-child {
            border-bottom: none;
        }

        .schedule-info {
            flex: 1;
        }

        .schedule-info h4 {
            font-size: 16px;
            margin-bottom: 8px;
            color: #334155;
        }

        .schedule-info p {
            color: #666;
            font-size: 14px;
            margin: 4px 0;
        }

        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 15px;
        }

        .status-active {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .status-inactive {
            background-color: #f5f5f5;
            color: #757575;
        }

        .status-running {
            background-color: #e3f2fd;
            color: #1565c0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #334155;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
        }

        .form-control:focus {
            outline: none;
            border-color: #4caf50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .form-row {
            display: flex;
            gap: 20px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .device-status {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .status-online {
            background-color: #4caf50;
        }

        .status-offline {
            background-color: #f44336;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .alert-info {
            background-color: #e3f2fd;
            color: #1565c0;
            border-left: 4px solid #1565c0;
        }

        .alert-warning {
            background-color: #fff8e1;
            color: #ff8f00;
            border-left: 4px solid #ff8f00;
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<div class="header">
    <div class="logo">
        <div class="logo-icon">🌱</div>
        <h1>智慧农业管理系统</h1>
    </div>
    <div class="user-info">
        <span>管理员</span>
        <div class="avatar" id="userAvatar">管</div>
        <div class="dropdown-menu" id="userDropdown">
            <a href="#" class="dropdown-item" onclick="showProfile()">个人设置</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item" onclick="logout()">退出登录</a>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 左侧导航 -->
    <div class="sidebar">
        <div class="nav-group">
            <div class="nav-title">系统导航</div>
            <a href="main.jsp" class="nav-item">系统首页</a>
            <a href="deviceManagement.jsp" class="nav-item">设备管理</a>
        </div>

        <div class="nav-group">
            <div class="nav-title">农业管理</div>
            <a href="environmentMonitor.jsp" class="nav-item">环境监测</a>
            <a href="pestControl.jsp" class="nav-item">病虫害防治</a>
            <a href="irrigationControl.jsp" class="nav-item active">灌溉施肥</a>
        </div>

        <div class="nav-group">
            <div class="nav-title">系统设置</div>
            <a href="userServlet?actionType=list" class="nav-item">用户管理</a>
            <a href="system_config.jsp" class="nav-item">系统配置</a>
            <a href="tech.jsp" class="nav-item">技术支持</a>
            <a href="we.jsp" class="nav-item">关于我们</a>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <h1 class="page-title">灌溉施肥控制</h1>

        <div class="alert alert-info">
            <strong>提示：</strong>智能灌溉系统可根据土壤湿度、天气预报自动调整灌溉计划，节约用水的同时保证作物生长需要。
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">控制模式</h2>
            </div>

            <div class="control-mode">
                <div class="radio-group">
                    <div class="radio-option">
                        <input type="radio" id="auto-mode" name="mode" checked>
                        <label for="auto-mode">自动模式（根据作物模型）</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="manual-mode" name="mode">
                        <label for="manual-mode">手动模式</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="schedule-mode" name="mode">
                        <label for="schedule-mode">定时模式</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">设备状态</h2>
                <button class="btn btn-primary" onclick="refreshDeviceStatus()">刷新状态</button>
            </div>

            <div class="device-status">
                <div class="status-indicator status-online"></div>
                <span>灌溉设备A区 - 在线</span>
                <span class="status-badge status-active">空闲</span>
            </div>
            <div class="device-status">
                <div class="status-indicator status-online"></div>
                <span>灌溉设备B区 - 在线</span>
                <span class="status-badge status-active">空闲</span>
            </div>
            <div class="device-status">
                <div class="status-indicator status-offline"></div>
                <span>施肥设备 - 离线</span>
                <span class="status-badge status-inactive">故障</span>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">当前灌溉计划</h2>
                <button class="btn btn-primary" onclick="showAddScheduleModal()">添加计划</button>
            </div>

            <div class="schedule-list">
                <div class="schedule-item">
                    <div class="schedule-info">
                        <h4>早间灌溉</h4>
                        <p><strong>时间：</strong>每天 06:00</p>
                        <p><strong>区域：</strong>A区、B区</p>
                        <p><strong>时长：</strong>30分钟</p>
                    </div>
                    <div>
                        <span class="status-badge status-active">已启用</span>
                        <button class="btn btn-success">立即执行</button>
                    </div>
                </div>
                <div class="schedule-item">
                    <div class="schedule-info">
                        <h4>晚间灌溉</h4>
                        <p><strong>时间：</strong>每天 18:00</p>
                        <p><strong>区域：</strong>A区、B区</p>
                        <p><strong>时长：</strong>30分钟</p>
                    </div>
                    <div>
                        <span class="status-badge status-active">已启用</span>
                        <button class="btn btn-success">立即执行</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">当前施肥计划</h2>
                <button class="btn btn-primary" onclick="showAddFertilizerModal()">添加计划</button>
            </div>

            <div class="schedule-list">
                <div class="schedule-item">
                    <div class="schedule-info">
                        <h4>常规施肥</h4>
                        <p><strong>时间：</strong>每周一 08:00</p>
                        <p><strong>区域：</strong>全区域</p>
                        <p><strong>类型：</strong>氮磷钾复合肥</p>
                    </div>
                    <div>
                        <span class="status-badge status-active">已启用</span>
                        <button class="btn btn-success">立即执行</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">手动控制</h2>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="zone-select">选择区域</label>
                    <select id="zone-select" class="form-control">
                        <option value="1">A区</option>
                        <option value="2">B区</option>
                        <option value="all">全区域</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="operation-select">操作类型</label>
                    <select id="operation-select" class="form-control">
                        <option value="irrigate">灌溉</option>
                        <option value="fertilize">施肥</option>
                        <option value="both">灌溉+施肥</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="duration-input">持续时间（分钟）</label>
                    <input type="number" id="duration-input" class="form-control" value="30" min="1" max="120">
                </div>
            </div>

            <button class="btn btn-success" onclick="executeManualOperation()">执行操作</button>
        </div>
    </div>
</div>

<script>
    // 用户下拉菜单功能
    document.addEventListener('DOMContentLoaded', function() {
        const userAvatar = document.getElementById('userAvatar');
        const userDropdown = document.getElementById('userDropdown');
        
        // 点击头像显示/隐藏下拉菜单
        userAvatar.addEventListener('click', function(e) {
            e.stopPropagation();
            userDropdown.classList.toggle('show');
        });
        
        // 点击页面其他地方隐藏下拉菜单
        document.addEventListener('click', function() {
            userDropdown.classList.remove('show');
        });
        
        // 阻止下拉菜单内部点击事件冒泡
        userDropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
    
    // 显示个人设置
    function showProfile() {
        window.location.href = 'profile.jsp';
    }
    
    // 退出登录
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            fetch('logout', {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    window.location.href = 'login.jsp';
                } else {
                    alert('退出登录失败，请稍后再试');
                }
            })
            .catch(error => {
                console.error('退出登录失败:', error);
                alert('退出登录失败，请稍后再试');
            });
        }
    }
    
    // 刷新设备状态
    function refreshDeviceStatus() {
        alert('设备状态已刷新');
    }
    
    // 显示添加计划模态框
    function showAddScheduleModal() {
        alert('添加计划功能开发中...');
    }
    
    // 显示添加施肥模态框
    function showAddFertilizerModal() {
        alert('添加施肥计划功能开发中...');
    }
    
    // 执行手动操作
    function executeManualOperation() {
        const zone = document.getElementById('zone-select').value;
        const operation = document.getElementById('operation-select').value;
        const duration = document.getElementById('duration-input').value;
        
        if (confirm(`确定要执行以下操作吗？\n区域：${zone}\n操作：${operation}\n持续时间：${duration}分钟`)) {
            alert('操作执行中...');
        }
    }
</script>
</body>
</html>
      </div>
      <div>
        <strong>类型：</strong>NPK复合肥（比例 3:1:2）
      </div>
      <button class="btn start">启动</button>
    </div>

    <div style="margin-top: 20px;">
      <h3>作物需水需肥模型</h3>
      <p>当前作物：番茄（结果期）</p>
      <p>建议日供水量：5L/㎡ | 建议施肥周期：7天/次</p>
      <button class="btn" style="background: #2196F3; color: white;">调整计划</button>
    </div>
  </div>
</div>
</body>
</html>
